import { Component, Element, Host, Method, Prop, Watch, h } from '@stencil/core';

/**
 * 拖拽分割线
 *
 * @export
 * @class IBzSplitSash
 */
@Component({
    tag: 'ibz-split-sash',
    styleUrl: 'ibz-split-sash.scss',
    shadow: true,
})
export class IBzSplitSash {
    /**
     * 组件DOM实例
     *
     * @type {HTMLIbzSplitSashElement}
     * @memberof IBzSplitSash
     */
    @Element()
    el: HTMLIbzSplitSashElement;

    /**
     * 是否显示
     *
     * @memberof IBzSplitSash
     */
    @Prop()
    visible = true;
    @Watch('visible')
    watchVisible(): void {
        if (this.visible) {
            this.showSelf();
        } else {
            this.hiddenSelf();
        }
    }

    /**
     * 距离顶部距离
     *
     * @memberof IBzSplitSash
     */
    @Prop()
    top = 0;

    render() {
        return <Host class='ibz-split-sash' style={{ top: this.top - 2 + 'px' }}></Host>;
    }

    /**
     * 隐藏
     *
     * @memberof IBzSplitSash
     */
    @Method()
    async hiddenSelf() {
        this.el.style.display = 'none';
    }

    /**
     * 显示
     *
     * @memberof IBzSplitSash
     */
    @Method()
    async showSelf() {
        this.el.style.display = null;
    }
}
